//在dom后加载

window.addEventListener('DOMContentLoaded',function(){
    let kinds = document.querySelectorAll("[data-click]");
    function roted(obj,menu){
        console.log("旋转了");
        if(menu.style.display=="block"){
            obj.style.transform="rotateZ(180deg)";
        }else{
            obj.style.transform="rotateZ(0deg)";
        }
    
    }
    for(let obj of kinds){
        obj.onclick=function(e){
            e.preventDefault();
            let id = this.dataset.id;
            let menu = document.getElementById(id);
            let dis = getComputedStyle(menu);
            let svg = this.querySelector("svg");
            console.log(dis.display);
            // console.log(id);
            if(dis.display=="block"){
                menu.style.display="none";
                this.className="";
                roted(svg,menu);
            }else{
                menu.style.display="block";
                this.className="spear";
                roted(svg,menu);
            } 
        }
        obj.onblur=function(){
            let id = this.dataset.id;
            let menu = document.getElementById(id);
            menu.style.display="none";
            this.className=""
            let svg = this.querySelector("svg");
            roted(svg,menu);
        }
    }
})
